<template>
  <div>
    <h3 style="letter-spacing: 1px;font-weight: 400;padding-bottom: 20px">基本设置</h3>

    <div>
      <el-form style="width: 350px;float: left" label-position="top" ref="form" :model="user" label-width="80px">
        <el-form-item style="padding: 0" prop="username" label="昵称">
          <el-input v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item style="padding: 0" prop="realName" label="真实姓名">
          <el-input v-model="user.realName"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="user.sex">
            <el-radio :label="0">男生</el-radio>
            <el-radio :label="1">女生</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生年月">
          <el-input v-model="user.birthday"></el-input>
        </el-form-item>
        <el-form-item style="padding: 0" label="邮箱">
          <el-input type="email" v-model="user.email"></el-input>
        </el-form-item>
        <el-form-item style="padding-top: 20px">
          <el-button type="primary" @click="onSubmit">更新基本信息</el-button>
        </el-form-item>
           
      </el-form>
      
      <div>
        <img style="padding-bottom: 10px;padding-left: 150px;width: 150px; height: 150px;" alt=""
             :src="`http://localhost:8082/file/${user.userImages}`">
        <el-upload
            style="padding-left: 500px;letter-spacing: 1px"
            class="upload-demo"
            accept=".png,.jpg"
            :headers="header"
            :action="uploadAction"
            :on-success="handleUploadSuccess"
            multiple
            :limit="1">
          <el-button style="width: 150px" size="small" type="primary">
            <i class="el-icon-upload2"></i> 点击上传
          </el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
        </el-upload>
      </div>
    </div>
  </div>
</template>

<script>
import {findById, updateUser} from "@/api/user";
import config from "@/config";
import axios from 'axios';
export default {
  
  data() {
    return {
      imageUrl: '',
      header: {
        "Authorization": localStorage.getItem("token")
      },
      uploadAction: config.API_URL + 'user/upload',
      uid: localStorage.getItem("uid"),
     
    
      user: {
        id: '',
        username: '',
        realName: '',
        sex: 0,
        birthday: '',
        phone: '',
        email: '',
        userImages: ''
      }
    }
  },
  mounted() {
    this.findById();
  },
  methods: {
    findById(){
      console.log('localStorage.getItem("uid") = ' + localStorage.getItem("uid"))
      //console.log("-------- uid --------" + this.uid)
      //this.uid = localStorage.getItem("uid");
      //根据uid获取用户信息
      axios.get('http://localhost:8082/user/findById?id='+ this.uid)
        .then(res =>{
            if(res.data.code == 200){
                this.user = res.data.data
            }
        })
    },
    onSubmit() {
      console.log("修改的用户信息："+this.user.realName)
      console.log("修改的用户信息："+this.user.sex)
      console.log("修改的用户信息："+this.user.userImages)
      updateUser(this.user).then(res => {
        if (res.success) {
          this.user = res.data;
          this.$message({
            type: 'success',
            message: '用户基本信息更新成功!'
          });
        }
      })
      
    },
    handleUploadSuccess(res) {
      this.user.userImages = res.msg;
      console.log("修改的用户信息："+this.user.userImages)
      updateUser(this.user).then(res => {
        if (res.success) {
          this.user = res.data;
          this.$message({
            type: 'success',
            message: '头像上传成功!'
          });
        }
      })
    }

  }
}
</script>

<style scoped>
.el-form--label-top .el-form-item__label {
  padding: 0;
}

.el-form-item {
  margin-bottom: 5px;
}
</style>
